<template>
    <div>
        <blog-top></blog-top>
        <side-bar :data="website.sideBar"></side-bar>
        <div class="page-container">
            <div class="section">
                <div class="page about">
                    <div class="about-body">
                        <div class="title">
                            <el-divider content-position="center" data-aos="zoom-in"><span class="message-divider">椿襄</span></el-divider>
                            <p data-aos="fade-right">
                                一个00后迷茫搬砖工
                            </p>
                            <p class="author-location text-center" data-aos="fade-left">
                                <i class="el-icon-map-location"></i>中国-湖北-武汉
                            </p>
                        </div>
                        <div class="contact text-center" data-aos="zoom-out">
                            <a :href="'tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=' + website.blogger.qq" target="_blank">
                                <i class="iconfont icon-qq"></i>
                            </a>
                            <el-tooltip class="item" effect="light" placement="right">
                              <template #content>
                                <div class="wechatimg"><img src="../../assets/img/code/wx.jpg"/></div>
                              </template>
                                <a href="#">
                                    <i class="iconfont icon-weixin"></i>
                                </a>
                            </el-tooltip>
                            <a href="#">
                                <i class="iconfont icon-meiwen"></i>
                            </a>
                            <a :href="'mailto:' + website.blogger.email">
                                <i class="iconfont icon-mail"></i>
                            </a>
                        </div>
                        <el-divider></el-divider>
                        <div class="introduce-box">
                            <div class="text-center introduce-title">简介</div>
                            <div class="field-box">
                                <el-row :gutter="20">
                                    <el-col :md="20" :sm="24" :xs="24" data-aos="fade-right" data-aos-duration="1000">
                                        <h1>个人信息</h1>
                                        <p>产品名称：椿襄</p>
                                        <p>规格：长≈1.77m，净重≈63KG，误差范围±1.5%，数据仅供参考，一切以实物为准</p>
                                        <p>产品成分：水约60%，碳水化合物以及脂肪约14%，蛋白质约17%，其他维生素、矿物质、纤维素约9%。</p>
                                        <p>原产地：Made in China</p>
                                        <p>生产批次：00后</p>
                                        <p>保质期：长期有效</p>
                                        <p>等级：特级</p>
                                        <p>外部包装：原装原配，无拆无修</p>
                                        <p>产品介绍：猿界小菜鸡，性别男，爱好女，产品已通过国家质量体系认证，手续齐全，稳定运转十余年不宕机。</p>
                                        <p>功能：我们不生产代码，我们只是代码的搬运工。尽量不生产BUG，非可控因素除外</p>
                                        <p>适用人群：老少咸宜</p>
                                        <p>注意事项：以上信息，最终解释权归厂家所有。</p>
                                    </el-col>
                                    <el-col :md="4" :sm="30" :xs="30" data-aos="fade-left" data-aos-duration="1000">
                                        <div class="pic-box">
                                            <div class="self-pic">
                                                <img class="self-img" src="../../assets/img/bg/author.jpg"/>
                                            </div>

                                        </div>
                                    </el-col>
                                </el-row>
                                <h1>个人介绍</h1>
                                <p>
                                    没有很多技术，只会捣鼓捣鼓别人代码的小菜鸡。
                                </p>
                            </div>
                        </div>
                        <div class="skill-box">
                            <div class="text-center skill-title">技能</div>
                            <div class="field-box">
                                <el-row :gutter="30">
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>Html</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="80" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>jsp</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="80" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>vue</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="35" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>CSS</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="40" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>jQuery</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="85" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>JS</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="80" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>Servlet</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="50" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>java</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="90" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>My SQL/Oracle</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="80" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>SpringBoot</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="80" :color="progressColor"></el-progress>
                                    </el-col>
                                    <el-col class="progress" :md="8" :sm="12" :xs="24" data-aos="zoom-in">
                                        <p>Mybatis/Mybatis Plus</p>
                                        <el-progress :show-text="false" :stroke-width="22" :percentage="80" :color="progressColor"></el-progress>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <h1 class="text-center about-end" data-aos="fade-up">The End</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex"
import BlogTop from '@/components/blog/blog-top'
import SideBar from '@/components/side-bar/main'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
    name: 'author',
    components: {
        BlogTop,
        SideBar
    },
    data() {
        return {}
    },
	computed: {
		...mapGetters(["website"])
	},
    mounted() {
    },
    methods: {
        progressColor() {
            return "rgb(" +
            Math.round(255 * Math.random()) +
            "," +
            Math.round(255 * Math.random()) +
            "," +
            Math.round(255 * Math.random()) +
            ")"
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../assets/styles/blog-common.scss';
.page-container {
    position: relative;
    z-index: 2;
    position: relative;
    background: #fff;
    padding:0 20px;
    min-height: 800px;
    opacity: 0.9;
}
.section {
    padding: 0;
}
.title {
    height: 80px;
    .message-divider {
        font-size: 2.2em;
        font-weight: 700;
    }
    p {
        font-size: 1.1em;
        text-align: center;
        padding-top: 10px;
        &:last-child {
            padding-bottom: 20px;
        }
    }
}
.author-location {
    font-weight: 500;
    font-size: 1.2em;
    color: #808080;
    margin-bottom: 25px;
    .el-icon-map-location {
        margin-right: 5px;
    }
}
/* 联系 */
.contact {
    text-align: center;
    padding-top: 35px;
    a {
        margin: 0 15px;
        .iconfont {
            font-size: 2.5em;
        }
    }
    i {
        color: black;
        &:hover {
            color: rgba(0, 0, 0, 0.5);
        }
    }
}

/* 简介 */
.introduce-box {

    margin-top: 30px;
    margin-bottom: 20px;
    .introduce-title {
        margin-top: 30px;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 24px;
    }
    .field-box {

        p {
            margin: 5px 0;
            font-size: 18px;
            text-align: left;
            text-indent: 2em;
            line-height: 40px;
        }
        h1 {
            font-weight: bold;
            font-size: 24px;
            text-align: left;
            margin-top: 25px;
        }
    }
}
.self-img{
    height:100%;
    width:100%;
    overflow: hidden;
    background-size:cover;
}
.about {
    .about-body {
        .pic-box {
            position: relative;
            height: 100%;
            width: 100%;
            padding-top: 30px;
            min-height: 500px;
        }
        .self-pic {
            max-width: 250px;
            min-height: 500px;
            // width: 150px;
            // height: 150px;
            border-radius: 5px;

        }
        .introduce-box {
            .sunglass {
                position: relative;
                left: 20px;
                top: 80px;
                background: url(~@/assets/img/bg/author01.jpg) no-repeat;
                background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                -webkit-background-size: cover;
            }
            .moto {
                position: relative;
                left: 120px;
                top: 150px;
                background: url(~@/assets/img/bg/bg01.jpg) no-repeat;
                background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                -webkit-background-size: cover;
            }
        }
    }
    .about-end {
        padding: 30px 0 50px;
        margin-bottom: 20px;
    }
}
.skill-box {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* 技能 */
.skill-box {
    .skill-title {
        margin-top: 30px;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 24px;
    }
    .progress {
        padding-top: 30px;
        p {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
    }
}
.wechatimg {
    width: 121px;
    height: 121px;
}
/* 媒体查询 */
@media (max-width: 767px) {
    .pic-box {
        height: 1000px !important;
        width: 100%;
        padding: 10px;
    }
    .self-pic {
        width: 90% !important;
        height: 400px !important;
        border-radius: 5px;
    }
    .self-pic.sunglass {
        left: 20px !important;
    }
    .self-pic.moto {
        left: 20px !important;
    }
}
@media (max-width: 415px) {
    .title {height: 100px;}
    .title .message-divider {
        font-size: 1.8em;
    }
    .title p {
        font-size: 1em;
    }
}
@media (max-width: 376px) {
    .title .message-divider {
        font-size: 1.6em;
    }
    .title p {
        font-size: 0.85em;
    }
}
</style>
